<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../day51/jquery.3.4.1.js"></script>

</head>
<body>
<form>
  <div class="form-group  has-feedback">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
<script>
    $('#exampleInputEmail1').blur(
        function () {
            var val = $(this).val()
            var ret = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val)
            if(ret){
                $(this).parent().removeClass('has-error')
                $(this).next().removeClass('glyphicon-remove')
                $(this).parent().addClass('has-success')
                $(this).next().addClass('glyphicon-ok')
                console.log('通过验证')
            }else{
                $(this).parent().removeClass('has-success')
                $(this).next().removeClass('glyphicon-ok')
                $(this).parent().addClass('has-error')
                $(this).next().addClass('glyphicon-remove')
                console.log('未通过验证')
            }
        }
    )
</script>
</html>